<template>
  <div class="app-container">
    <header>
      <h1>Your robot</h1>
    </header>
    <p class="footer-info">你的机器人可以为你做以下9个方面的事情。</p>
    <div class="content">
      <SectionOne />
      <SectionTwo />
      <SectionThree />
      <SectionFour />
      <SectionFive />
      <SectionSix />
      <SectionSeven />
      <SectionEight />
      <SectionNine />
      <SectionTen />
    </div>
	<p class="footer-info">TheBegain竭诚为您服务，提供最优秀的产品给您。</p>
    <footer class="footer">
      <p>&copy; 2077 TheBegain   &nbsp;| &nbsp;  火ICP备31415926535897932号  &nbsp;|&nbsp;  火公网安备314159265358979号</p>
      <p>联系我们: <a href="mailto:314159265358@huoxing.com">314159265358@huoxing.com</a></p>
    </footer>
  </div>
</template>

<script setup>
import SectionOne from './SectionOne.vue';
import SectionTwo from './SectionTwo.vue';
import SectionThree from './SectionThree.vue';
import SectionFour from './SectionFour.vue';
import SectionFive from './SectionFive.vue';
import SectionSix from './SectionSix.vue';
import SectionSeven from './SectionSeven.vue';
import SectionEight from './SectionEight.vue';
import SectionNine from './SectionNine.vue';
import SectionTen from './SectionTen.vue';

</script>

<style scoped>
.app-container {
  width: 100%;
  margin: auto;
  font-family: Arial, sans-serif;
}

header {
  text-align: center;
  padding: 20px;
}

.footer-info {
  color: gray; /* 设置文本颜色为灰色 */
  font-size: 0.9em; /* 设置字体大小为较小 */
  text-align: center; /* 文本居中 */
  margin: 10px 0; /* 增加上下间距 */
}

.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  gap: 20px;
  padding: 20px;
}

/* 组件样式示例 */
section {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* 底部样式 */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  margin-top: 20px; /* 与内容间隔 */
}

.footer p {
  margin: 5px 0; /* 消除段落之间的间距 */
}
.footer a {
    color: black; /* 设置链接颜色为黑色 */
    text-decoration: none; /* 去掉下划线 */
    transition: all 1s; /* 渐变效果，过渡时间为1秒 */
}

.footer a:hover {
    border-radius: 10px;
    background-color: blueviolet;
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
    transform: scale(2); /* 鼠标悬停时增大 */
    color: white;
}
</style>
